<template>
  <div class="column">
    <router-view/>
    <div class="panelSmLonggy" >
      <div class="boxb2"><h2>{{ year }}年{{month}}月分区镇社会消费品零售总额</h2></div>
      <div class="panelSmLong1">
        <v-chart class="chart" :option="option1" :autoresize="true"></v-chart>
      </div>
      <div class="panelSmLonggy-foot"></div>
    </div>
    <div class="panelSmLonggy1">
      <div class="boxb1"><h2>{{ year }}年{{month}}月分区镇社会消费品零售总额同比增速排名</h2></div>
      <div class="panelSmLong1">
        <v-chart class="chart" :option="option2" :autoresize="true"></v-chart>
      </div>
      <div class="panelSmLonggy1-foot"></div>
    </div>
  </div>
</template>

<script>
import l1 from '../css/images/l1.png';
import l2 from '../css/images/l2.png';
import l3 from '../css/images/l3.png';
import axios from 'axios';
import * as echarts from "echarts";
export default {
  name: "my1",
  mounted() {
    this.$parent.reverseColor1();
  },
  methods: {
    getdata1(){
      axios.get('http://localhost:9090/tradeAndService/getSocialRetailSales',{
        params:{
          year:this.year,
          month:this.month,
        }
      }).then(res=>{

        this.option1.legend.data[0].name = this.month+''+"月当月总产值"
        this.option1.series[1].name = this.month+''+"月当月总产值"

        this.option1.legend.data[1].name =  this.month+''+"累计总产值"
        this.option1.series[2].name =  this.month+''+"累计总产值"

        if (res.data[0]==null) {
          this.option1.series[1].data = [0,0,0,0,0,0,0,0,0,0]
          this.option1.series[2].data = [0,0,0,0,0,0,0,0,0,0]
          this.option1.series[3].data = [0,0,0,0,0,0,0,0,0,0]
          this.option2.series[0].data = [0,0,0,0,0,0,0,0,0,0]
          return
        }
        for (var i =0 ;i < res.data.length;i++) {
          this.data1[i]=res.data[i].thisMonth
          this.data2[i]=res.data[i].accumulate
          this.data3[i]=res.data[i].monthOnMonth
        }
        this.option1.series[1].data = this.data1
        this.option1.series[2].data = this.data2
        this.option1.series[3].data = this.data2
        this.option2.series[0].data = this.data3

      })
    },
  },

  watch: {
    '$parent.selectedYear': {
      immediate: true,
      handler(v) {
        this.year = v
      }
    },
    '$parent.selectedMonth': {
      immediate: true,
      handler(v) {
        this.month = v
        this.getdata1();
      }
    }
  },

  data() {
    return {
      newDate: new Date(),
      year:this.$parent.selectedYear,
      month:this.$parent.selectedMonth,
      data1:[0,0,0,0,0,0,0,0,0,0],
      data2:[0,0,0,0,0,0,0,0,0,0],
      data3:[0,0,0,0,0,0,0,0,0,0],

      option1 : {
        tooltip: {
          backgroundColor: "#00194A",
          trigger: 'axis',
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
          formatter: ((params)=>{
            return `<div style="font-size:15px;">${params[0].axisValue}</div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">当月：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">${this.data1[params[0].dataIndex]}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
              </div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">累计</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;">${this.data2[params[0].dataIndex]}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; ">亿元</p>
              </div>`;
          })
        },
        legend: {
          orient:'horizontal',
          right: '12.5%',

          textStyle: {
            color: '#A1D5FF',
            fontSize:10,
          },
          data: [ {
            name: '8月当月总产值',
            icon: ('image://' + l1 + '')
          },{
            name: '8月累计总产值',
            icon: ('image://' + l2 + '')
          }],

        },
        grid: {
          top:'20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show:true,
          borderColor:"#012f4a",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['全市总计', '昆山开发区', '昆山高新区', '花桥经济开发区',
            '旅游度假区', '张浦镇', '周市镇', '陆家镇','巴城镇','千灯镇'],
          axisTick:{
            show:false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#97C9FF',
              fontSize:'12'
            },
            margin: 10, // 刻度标签与轴线之间的距离。
          },
          axisLine:{
            show:true
          }
        },
        yAxis: {
          name:'(亿元)',
          nameTextStyle:{
            color: '#97C9FF',
            fontSize:10,
          },
          type: 'value',
          axisTick:{
            show:false
          },
          axisLabel:{
            margin: 20,
            textStyle: {
              color: '#97C9FF',
              fontSize:'12',
            },
            color:'#4c9bfd'
          },
          axisLine:{
            show:false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.5
            }
          },
        },
        series: [
            //不用传，全为0
          {
            //最下面
            type: 'pictorialBar',
            symbolSize: [26, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: function(params) {
                  return '#01BEC7'
                }
              }
            },
            data: [0,0,0,0,0,0,0,0,0,0]
          },
            //data1传入当月值
          {
            name:'8月当月总产值',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: function(params) {
                  return new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [{
                        offset: 1,
                        color: '#01BEC7'
                      },
                        {
                          offset: 0,
                          color: 'rgba(8, 84, 233, 1)'
                        }
                      ]
                  )
                },
                opacity: 1
              }
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: '-100%', // Make series be overlap
            data: this.data1,
          },
            //data2传入 当月和累计的总和
          {
            name: '8月累计总产值',
            type: 'pictorialBar',
            symbolSize: [26, 10],
            symbolOffset: [0, -7],
            z: 12,
            itemStyle: {
              color: '#3D9140'
            },
            symbolPosition: 'end',
            data:  this.data2,
          },
            //data2传入 当月和累计的总和
          {
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: function(params) {
                  return new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [{
                        offset: 1,
                        color: '#3D9140'
                      },
                        {
                          offset: 0,
                          color: 'rgba(61, 145, 64, 0.2)'
                        }
                      ]
                  )
                },
                opacity: 1
              }
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: '-100%', // Make series be overlap
            data: this.data2,
          },
        ]
      },









      option2:{
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top:'20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show:true,
          borderColor:"#012f4a",
          containLabel: true
        },
        legend: {
          orient:'horizontal',
          right: '12.5%',
          data: [ {
            name: '同比+',
            icon: ('image://' + l3 + ''),
            textStyle:{
              color: 'orange'
            }
          },{
            name: '同比-',
            icon: ('image://' + l2 + ''),
            textStyle:{
              color: '#43CD80'
            }
          },]
        },
        xAxis: [{
          data: ['全市总计', '昆山开发区', '昆山高新区', '花桥经济开发区',
            '旅游度假区', '张浦镇', '周市镇', '陆家镇','巴城镇','千灯镇'],
          show: true,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#97C9FF',
              fontSize:'10'
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'gray',
              opacity: 1
            }
          },
          axisTick: {
            show: false
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            width: 0.08,
            lineStyle: {
              type: "solid",
              color: "#03202E"
            }
          }
        }],
        yAxis: [{
          name: '(%)',
          nameTextStyle: {
            align: 'left',
            color: '#97C9FF',
            padding: [0, 0, 0, -25],
            fontSize:10,
          },
          //背景网格为虚线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.5
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#97C9FF',
              fontSize:'12',
            }
          }
        },
        ],
        series: [
          {
            name:'同比+',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: this.data3,
            itemStyle:{
              normal:{
                color:function (params){
                  if( params.value >=0){
                    return 'orange';
                  }else{
                    return '#43CD80';
                  }
                }
              }
            }
          },
          {
            name:'同比-',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
          },
        ]
      },
    }
  }
}
</script>

<style scoped>

</style>